<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Detail Employee</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/jquery.dataTables.css"/>
<link rel="stylesheet" href="css/main-cs.css">
<style>
	p { 
		word-break: break-all;
		white-space: normal; 
		text-align:left;
	}
	td{
		text-align:left;
	}
</style>
</head>
<body>
<!-- Modal Contract-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Contract's ${DetailEmployees.employee.firstName }</h4>
      </div>
      <div class="modal-body">
	    <div class="row">
         <div id="run" class="progress progress-striped active form-group" style="display:none">
		   	<div class="progress-bar progress-bar-success" role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">Please waiting...</div>
		</div>
		<div class="form-group col-md-12">
			<button type="button" class="btn btn-primary" id="btn-updateContract" style="display: none;">Update</button>
	      	<button type="button" class="btn btn-primary" id="btn-saveContract">Save</button>
		    <button type="button" class="btn btn-primary" id="btn-addMoreContract">Add more</button>
		</div>
        <div class="form-group col-md-12">
	            <label for="recipient-name" class="control-label" style="color:#F00; display:none" id="lblMesage"><b></b></label>
	     </div>
	     <div class="form-group col-md-6" id="divCreateDate" style="display: none;">
	            <p id="pCreateDate"><b>Create Date:</b></p>
	      </div>
	      <div class="form-group col-md-6" id="divUserCreate" style="display: none;">
	            <p id="pUserCreate"><b>Create By:</b></p>
                
	      </div>
	      <div class="form-group col-md-6" id="divUpdateDate" style="display: none;">
	            <p id="pUpdateDate"><b>Update Date:</b></p>
	      </div>
	      <div class="form-group col-md-6" id="divUserUpdate" style="display: none;">
	            <p id="pUserUpdate"><b>Update By:</b></p>
	      </div>
         <div class="form-group col-md-12">
	            <label>Contract Type</label>
                <p id="pContractType" style="display:none"></p>
                <select id="contractType" class="form-control">
                	<option value="0">--Select Contract Type--</option>
                    <option value="Short-term">Short-term Contracts</option>
                    <option value="Long-term">Long-term Contracts</option>
                </select>
	      </div>
          <div class="form-group col-md-6">
	            <label>ContractID</label>
                <p id="pContractID" style="display:none"></p>
                <input type="text" class="form-control" id="contractID"/>
	      </div>
	      <div class="form-group col-md-6">
	            <label>Contract Name</label>
                <p id="pContractName" style="display:none"></p>
                <input type="text" class="form-control" id="contractName"/>
	      </div>
          <div class="form-group col-md-6">
	            <label>Register Date</label>
                <p id="pContractRegDate" style="display:none"></p>
               	<input type="date" id="RegDate" class="form-control"/>
	       </div>
           <div class="form-group col-md-6">
	            <label>Start Date</label>
                <p id="pContractStartDate" style="display:none"></p>
               	<input type="date" id="StartDate" class="form-control"/>
	       </div>
           <div class="form-group col-md-6">
	            <label>End Date</label>
                <p id="pContractEndDate" style="display:none"></p>
               	<input type="date" id="EndDate" class="form-control"/>
	        </div>
            <div class="form-group col-md-6">
	            <label>Salary</label>
                <p id="pContractSalary" style="display:none"></p>
               	<input type="text" id="Salary" class="form-control"/>
	        </div>
	    </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal Insurance-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Insurance's ${DetailEmployees.employee.firstName }</h4>
      </div>
      <div class="modal-body">
      		<div class="row">
             <div id="run1" class="progress progress-striped active form-group" style="display: none;">
		   		<div class="progress-bar progress-bar-success" role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">Please waiting...</div>
			</div>
      		<div class="form-group col-md-12">
      			<button type="button" class="btn btn-primary" id="btn-updateInsurance" style="display: none;">Update</button>
      			<button type="button" class="btn btn-primary" id="btn-saveInsurance">Save</button>
        		<button type="button" class="btn btn-primary" id="btn-addMoreInsurance">Add more</button>
      		</div>
            <div class="form-group col-md-12">
                   <label for="recipient-name" class="control-label" style="color:#F00; display:none" id="lblMesage1"><b></b></label>
            </div>
            <div class="form-group col-md-6" id="divCreateDate1" style="display: none;">
                <p id="pCreateDate1"></p>
	      </div>
	      <div class="form-group col-md-6" id="divUserCreate1" style="display: none;">
                <p id="pUserCreate1"></p>
	      </div>
	      <div class="form-group col-md-6" id="divUpdateDate1" style="display: none;">
                <p id="pUpdateDate1"></p>
	      </div>
	      <div class="form-group col-md-6" id="divUserUpdate1" style="display: none;">
                <p id="pUserUpdate1"></p>
	      </div>
            <div class="form-group col-md-6">
                    <label>Insurance Type</label>
                    <select id="insuranceType" class="form-control">
                        <option value="0">--Select Insurance Type--</option>
                        <option value="Health">Health Insurance</option>
                        <option value="Accident">Accident Insurance</option>
                    </select>
            </div>
           <div class="form-group col-md-6">
                    <label>InsuranceID</label>
                    <input type="text" class="form-control" id="insuranceID"/>
            </div>
            <div class="form-group col-md-6">
                    <label>Pay Form</label>
                    <select id="payForm" class="form-control">
                        <option value="0">--Select Pay Form--</option>
                        <option value="Deduction">Deduction from salary</option>
                        <option value="Company">Company pay</option>
                    </select>
               </div>
               <div class="form-group col-md-6">
                    <label>Register Date</label>
                    <input type="date" id="insuranceRegDate" class="form-control"/>
              </div>
               <div class="form-group col-md-6">
                    <label>Money/Month</label>
                    <input type="text" id="money" class="form-control"/>
                  </div>
              <div class="form-group col-md-6">
                    <label>Register Place</label>
                    <textarea id="regPlace" class="form-control"></textarea>
             </div>
           </div>
      </div>
    </div>
  </div>
</div>
<!-- Content -->
<%@ include file="_header.jsp" %>
<div id="main">
	<ol class="breadcrumb">
  		<li><a class="management" style="cursor: pointer;">Home</a></li>
  		<li><a class="management" style="cursor: pointer;">Management</a></li>
  		<li class="active">Detail Employee</li>
	</ol>
    <div id="panel1">
    	<div class="panel panel-primary">
        	<div class="panel-heading">
            	<p style="color:#FFF; font-weight:bold; font-size:20px">Detail Employee ${DetailEmployees.employee.firstName }</p>
            </div>
            <div class="panel-body">
            <div id="updateSuccess" style="display: none;">
            	<h1 style="text-align:center">Update Employee Success</h1>
                <h2 style="text-align:center">Please! Click <b><i><a id="continue" style="cursor: pointer;">continue</a></i></b> to see the effect after update</h2>
            </div>
            <div id="content">
            	<div id="tab">
			    <ul class="nav nav-tabs" role="tablist">
				  <li role="presentation" class="active" id="employeeTab"><a href="#employeeInfo">Employee</a></li>
				  <li role="presentation" id="contractTab"><a href="#contractInfo">Contract</a></li>
				  <li role="presentation" id="insuranceTab"><a href="#insuranceInfo">Insurance</a></li>
				</ul>
			</div>
            <div id="employeeInfo">
              <form class="form-horizontal" id="formAddEmployee" name="formAddEmployee"
								method="post" action="DetailEmployeeController.do?action=updateEmployee&employeeID=${DetailEmployees.employee.employeeID}"
								enctype="multipart/form-data" onsubmit="return validateData()">
                <table class="table">
                	<tr>
                   	 <td></td>
                   	 <td colspan="2">
                    	<button class="btn btn-info col-md-2" type="button" id="edit">Edit</button>
                        <button class="btn btn-info col-md-2" type="submit" id="update" style="margin-left: 5px; display:none;">Update</button>
                        <button class="btn btn-info col-md-2" type="button" id="cancel" style="margin-left: 5px; display:none;">Cancel</button>
                    	</td>
					</tr>
                    <tr>
                        <td width="16%" valign="middle"><img src="${DetailEmployees.employee.image}" width="150" height="150" id="image"/></td>
                        <td width="42%">
                        	<table class="table" id="table1">
                            	<tr>
                                	<td><label>Create Date</label></td>
                                    <td><p id="lbCreateDate">${DetailEmployees.employee.createDate}</p></td>
                                </tr>
                                <tr>
                                	<td><label>Last Update</label></td>
                                    <td><p id="lbUpdateDate">${DetailEmployees.employee.updateDate == null? "No Update":DetailEmployees.employee.updateDate}</p></td>
                                </tr>
                            	<tr>
                                	<td><label>EmployeeID</label></td>
                                    <td><p id="lbEmpID">${DetailEmployees.employee.employeeID}</p></td>
                                </tr>
                                <tr>
                                	<td><label id="eFirstName" style="cursor:pointer">First Name<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbEmpFirstName">${DetailEmployees.employee.firstName}</p><input type="text" class="form-control" id="empFirstName" name="empFirstName" value="${DetailEmployees.employee.firstName}" style="display:none"/><label id="errorFirstName" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eBirthDate" style="cursor:pointer">Birth Date</label></td>
                                    <td><p id="lbBirthDate">${DetailEmployees.employee.birthdate}</p><input type="date" class="form-control" id="empBirthDate" name="empBirthDate" value="${DetailEmployees.employee.birthdate}" style="display:none"/></td>
                                </tr>
                                <tr>
                                	<td><label id="eNationality" style="cursor:pointer">Nationality</label></td>
                                    <td><p id="lbNationality">${DetailEmployees.employee.nationality.nationalityName}</p><select id="empNationality" name="empNationality" class="form-control" style="display:none">
                                    	<option value="Mr">Mr</option>
                                        <option value="Mrs">Mrs</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label id="eNativeLand" style="cursor:pointer">NaviteLand</label></td>
                                    <td><p id="lbNaviteLand">${DetailEmployees.employee.naviteLand}</p><textarea id="empNativeLand" name="empNativeLand" class="form-control" style="display:none">${DetailEmployees.employee.naviteLand}</textarea></td>
                                </tr>
                                <tr>
                                	<td><label id="eEmail" style="cursor:pointer">Email<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbEmail">${DetailEmployees.employee.email}</p><input type="text" class="form-control" id="empEmail" name="empEmail" value="${DetailEmployees.employee.email}" style="display:none"/><label id="errorEmail" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eIDCard" style="cursor:pointer">ID Card<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbIDCard">${DetailEmployees.employee.indentityCard}</p><input type="text" class="form-control" id="empIDCard" name="empIDCard" value="${DetailEmployees.employee.indentityCard}" style="display:none"/><label id="errorIDCard" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eLiteracy" style="cursor:pointer">Literacy</label></td>
                                    <td><p id="lbLiteracy">${DetailEmployees.employee.literacy.literacyName}</p><select id="empLiteracy" name="empLiteracy" class="form-control" style="display:none">
                                    	<option value="0">--Select Literacy--</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label id="eDepartment" style="cursor:pointer">Department<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbDepartment">${DetailEmployees.employee.department.deptName}</p><select id="empDepartment" name="empDepartment" class="form-control" style="display:none">
                                    	<option value="0">--Select Department--</option>
                                    </select><label id="errorDepartment" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eImage" style="cursor:pointer">Image</label></td>
                                    <td><input type="file" class="form-control" id="empImage" name="empImage" onchange="onFileSelected(event)" style="display:none"/></td>
                                </tr>
                                
                            </table>
                        </td>
                        <td width="42%">
                        	<table class="table" id="table2">
                            	<tr>
                                	<td><label>Create By</label></td>
                                    <td><p id="lbUserCreate">${DetailEmployees.userCreate.fullname}</p></td>
                                </tr>
                                <tr>
                                	<td><label>Update By</label></td>
                                    <td><p id="lbUserUpdate">${DetailEmployees.userUpdate == null?"No Update":DetailEmployees.userUpdate.fullname}</p></td>
                                </tr>
                            	<tr>
                                	<td><label id="eTitle" style="cursor:pointer">Title</label></td>
                                    <td><p id="lbTitle">${DetailEmployees.employee.title}</p><select id="empTitle" name="empTitle" class="form-control" style="display:none">
                                    	<option value="Mr">Mr</option>
                                        <option value="Mrs">Mrs</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label id="eLastName" style="cursor:pointer">Last Name<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbLastName">${DetailEmployees.employee.lastName}</p><input type="text" class="form-control" id="empLastName" name="empLastName" value="${DetailEmployees.employee.lastName}" style="display:none"/><label id="errorLastName" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eGender" style="cursor:pointer">Gender</label></td>
                                    <td><p id="lbGender">${DetailEmployees.employee.gender == true? "Male": "Felmale"}</p><select id="empGender" name="empGender" class="form-control" style="display:none">
                                    	<option value="true">Male</option>
                                        <option value="false">Felmale</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label id="eMarriage" style="cursor:pointer">Marriage</label></td>
                                    <td><p id="lbMarrage">${DetailEmployees.employee.maritalStatus == true? "Yes": "No"}</p><select id="empMarital" name="empMarital" class="form-control" style="display:none">
                                    	<option value="true">Yes</option>
                                        <option value="false">No</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label id="eCurrenentAddress" style="cursor:pointer">Address</label></td>
                                    <td><p id="lbAddress">${DetailEmployees.employee.currentAddress}</p><textarea id="empCurrentAddress" name="empCurrentAddress" class="form-control" style="display:none">${DetailEmployees.employee.currentAddress}</textarea></td>
                                </tr>
                                <tr>
                                	<td><label id="ePhone" style="cursor:pointer">Phone<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbPhone">${DetailEmployees.employee.phone}</p><input type="text" class="form-control" id="empPhone" name="empPhone" value="${DetailEmployees.employee.phone}" style="display:none"/><label id="errorPhone" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eBank" style="cursor:pointer">Bank<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbBank">${DetailEmployees.employee.bank.bankName}</p><select id="empBank" name="empBank" class="form-control" style="display:none">
                                    	<option value="0">--Select Bank--</option>
                                    </select><label id="errorBank" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eBrandBank" style="cursor:pointer">Brand Bank<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbBrankBank">${DetailEmployees.employee.brandBank.brandName}</p><select id="empBrandBank" name="empBrandBank" class="form-control" style="display:none">
                                    	<option value="0">--Select Brand Bank--</option>
                                    </select><label id="errorBrandBank" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eAccountBank" style="cursor:pointer">Account<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbAccount">${DetailEmployees.employee.accountBank}</p><input type="text" class="form-control" id="empAccountBank" name="empAccountBank" value="${DetailEmployees.employee.accountBank}" style="display:none"/><label id="errorAccount"  style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label id="eOffice" style="cursor:pointer">Office<b style="color:#F00">*</b></label></td>
                                    <td><p id="lbOffice">${DetailEmployees.employee.office.officeName}</p><select id="empOffice" name="empOffice" class="form-control" style="display:none">
                                    	<option value="0">--Select Office--</option>
                                    </select><label id="errorOffice" style="display:none"></label></td>
                                </tr>
                            </table>
                        </td>
                  </tr>
                </table>
             </form>
             </div>
             <div id="contractInfo" style="display:none"><br>
             	<button class="btn btn-info col-md-2" type="button" id="addContract" style="margin-left: 5px">Add Contract</button>
             	<br><br><br><table id="example">
                    <thead>
                         <tr>
                            <th>Select</th>
                            <th>ContractID</th>
                            <th>Contract Type</th>
                            <th>Contract Name</th>
                            <th>Register Date</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Salary</th>
                         </tr>
                     </thead>
                        <tbody id="content1">
                        	<c:forEach var="contract" items="${DetailEmployees.contracts }">
							   <tr>
							   		<td><a style="cursor: pointer;" onclick="detailContract('<c:out value="${contract.contractID }"></c:out>')">Detail</a>
							   		<a style="cursor: pointer;" onclick="deleteContract('<c:out value="${contract.contractID }"></c:out>')">Delete</a></td>
							   		<td><c:out value="${contract.contractID }"></c:out></td>
							   		<td><c:out value="${contract.contractType }"></c:out></td>
							   		<td><c:out value="${contract.contractName }"></c:out></td>
							   		<td><c:out value="${contract.regDate }"></c:out></td>
							   		<td><c:out value="${contract.startDate }"></c:out></td>
							   		<td><c:out value="${contract.endDate }"></c:out></td>
							   		<td><c:out value="${contract.salary }"></c:out></td>
							   </tr>
							</c:forEach>
                        </tbody>
                  </table>
             </div>
             <div id="insuranceInfo" style="display:none"><br>
               <button class="btn btn-info col-md-2" type="button" id="addInsurance" style="margin-left: 5px">Add Insurance</button>
             	<br><br><br><table id="example1">
                    <thead>
                         <tr>
                            <th>Select</th>
                            <th>IsuranceID</th>
                            <th>Insurance Type</th>
                            <th>Register Date</th>
                            <th>Register Place</th>
                            <th>Pay Form</th>
                            <th>Money/Month</th>
                         </tr>
                     </thead>
                        <tbody id="content2">
                        	<c:forEach var="insurance" items="${DetailEmployees.insurances }">
							   <tr>
							   		<td><a onclick="detailInsurance('<c:out value="${insurance.insuranceID }"></c:out>')" style="cursor: pointer;">Detail</a>
							   		<a onclick="deleteInsurance('<c:out value="${insurance.insuranceID }"></c:out>')" style="cursor: pointer;">Delete</a></td>
							   		<td><c:out value="${insurance.insuranceID }"></c:out></td>
							   		<td><c:out value="${insurance.insurancType }"></c:out></td>
							   		<td><c:out value="${insurance.regDate }"></c:out></td>
							   		<td><c:out value="${insurance.regLocation }"></c:out></td>
							   		<td><c:out value="${insurance.payForm }"></c:out></td>
							   		<td><c:out value="${insurance.money == 0?'':insurance.money }"></c:out></td>
							   </tr>
							</c:forEach>
                        </tbody>
                  </table>
             </div>
             </div>
    	 </div><!-- end panel-body-->
        </div><!-- end panel primary-->
    </div><!-- end panel1-->
</div><!-- end main-->
<%@include file="_footer.jsp" %>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootbox.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	var contractFlag = false;
	var insuranceFlag = false;
	$("#contractTab").click(function(){
		$("#contractTab").addClass("active");
		$("#contractInfo").css("display", "");
		$("#employeeTab").removeClass("active");
		$("#employeeInfo").css("display", "none");
		$("#insuranceTab").removeClass("active");
		$("#insuranceInfo").css("display", "none");
	});
	
	$("#employeeTab").click(function(){
		$("#contractTab").removeClass("active");
		$("#contractInfo").css("display", "none");
		$("#employeeTab").addClass("active");
		$("#employeeInfo").css("display", "");
		$("#insuranceTab").removeClass("active");
		$("#insuranceInfo").css("display", "none");
	});
	
	$("#insuranceTab").click(function(){
		$("#contractTab").removeClass("active");
		$("#contractInfo").css("display", "none");
		$("#employeeTab").removeClass("active");
		$("#employeeInfo").css("display", "none");
		$("#insuranceTab").addClass("active");
		$("#insuranceInfo").css("display", "");
	});
	
	$("#edit").click(function(){
		$("#update").css("display", "");
		$("#cancel").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "none");
		$("#empTitle").css("display", "");
		//Firstname
		$("#lbEmpFirstName").css("display", "none");
		$("#empFirstName").css("display", "");
		//Lastname
		$("#lbLastName").css("display", "none");
		$("#empLastName").css("display", "");
		//Birthdate
		$("#lbBirthDate").css("display", "none");
		$("#empBirthDate").css("display", "");
		//Gender
		$("#lbGender").css("display", "none");
		$("#empGender").css("display", "");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "none");
		$("#empNationality").css("display", "");
		//Marrage
		$("#lbMarrage").css("display", "none");
		$("#empMarital").css("display", "");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "none");
		$("#empNativeLand").css("display", "");
		//Address
		$("#lbAddress").css("display", "none");
		$("#empCurrentAddress").css("display", "");
		//Email
		$("#lbEmail").css("display", "none");
		$("#empEmail").css("display", "");
		//Phone
		$("#lbPhone").css("display", "none");
		$("#empPhone").css("display", "");
		//IDCard
		$("#lbIDCard").css("display", "none");
		$("#empIDCard").css("display", "");
		//Bank(*)
		$("#lbBank").css("display", "none");
		$("#empBank").css("display", "");
		//Deparment(*)
		$("#lbDepartment").css("display", "none");
		$("#empDepartment").css("display", "");
		//BranBank(*)
		$("#lbBrankBank").css("display", "none");
		$("#empBrandBank").css("display", "");
		//Account
		$("#lbAccount").css("display", "none");
		$("#empAccountBank").css("display", "");
		//Office(*)
		$("#lbOffice").css("display", "none");
		$("#empOffice").css("display", "");
		//Literacy(*)
		$("#lbLiteracy").css("display", "none");
		$("#empLiteracy").css("display", "");
		//Image
		$("#empImage").css("display", "");
	});
	
	function onFileSelected(event) {
		  if(checkExtendImageFile()){
	    	  var selectedFile = event.target.files[0];
	    	  var reader = new FileReader();
	    	  var imgtag = document.getElementById("image");
	    	  imgtag.title = selectedFile.name;
	    	  reader.onload = function(event) {
	    	  	imgtag.src = event.target.result;
	    	  };
	    	  reader.readAsDataURL(selectedFile);   
		  }
  }
	$(document).ready(function(){
		var update = ${DetailEmployees.update};
		var error = ${DetailEmployees.error};
		
		if(update){
			$("#updateSuccess").css("display","");
			$("#content").css("display","none");
		}
		
		if(error){
			bootbox.alert(displayError());
		}
		
		$.ajax({
			url:"AddEmployeeController.do?action=getAdd",
			type:"POST",
			success:function(data){
				loadAdd(data);
			},
			error:function(data){
				
			}
		});
		
		table = $('#example').dataTable();
		table1 = $('#example1').dataTable();
	});
	
	function loadAdd(data){
		var json = data.split('~');
		loadBank(json[0]);
		loadOffice(json[1]);
		loadNationality(json[2]);
		loadLiteracy(json[3]);
		loadDepartment(json[4]);
	}
	
	function loadBank(data){
		var json = JSON.parse(data);
		$("#empBank").empty();
		$("#empBank").append("<option value='0'>--Select Bank--</option>");
		for(i = 0; i < json.BankList.length; i++){
			$("#empBank").append("<option value="+json.BankList[i].BankID+">"+json.BankList[i].BankName+"</option>");
		}
		var brankID = ${DetailEmployees.employee.bank.bankID };
		$("#empBank").val(brankID);
		$.ajax({
			url:"AddEmployeeController.do?action=getBrandBank&bankID="+$("#empBank option:selected").val(),
			type:"POST",
			datatype:'json',
			success: function(data){
				$("#empBrandBank").prop("disabled", false);
				var json = JSON.parse(data);
				$("#empBrandBank").empty();
				$("#empBrandBank").append("<option value='0'>--Select Brand Bank--</option>");
				for(i = 0; i < json.BrandBankList.length; i++){
					$("#empBrandBank").append("<option value="+json.BrandBankList[i].BrandBankID+">"+json.BrandBankList[i].BrandBankName+"</option>");
				}
				var brandID = ${DetailEmployees.employee.brandBank.brandID };
				$("#empBrandBank").val(brandID);
			},
			error:function(){
				
			}
		});
	}
	
	function loadOffice(data){
		var json = JSON.parse(data);
		$("#empOffice").empty();
		$("#empOffice").append("<option value='0'>--Select Office--</option>");
		for(i = 0; i < json.OfficeList.length; i++){
			$("#empOffice").append("<option value="+json.OfficeList[i].OfficeID+">"+json.OfficeList[i].OfficeName+"</option>");
		}
		var officeID = ${DetailEmployees.employee.office.officeID }; 
		$("#empOffice").val(officeID);
	}
	
	function loadNationality(data){
		var json = JSON.parse(data);
		$("#empNationality").empty();
		$("#empNationality").append("<option value='0'>--Select Nationality--</option>");
		for(i = 0; i < json.NationalityList.length; i++){
			$("#empNationality").append("<option value="+json.NationalityList[i].NationalityID+">"+json.NationalityList[i].NationalityName+"</option>");
		}
		var nationalityID = ${DetailEmployees.nationality};
		$("#empNationality").val(nationalityID);
	}
	
	function loadDepartment(data){
		var json = JSON.parse(data);
		$("#empDepartment").empty();
		$("#empDepartment").append("<option value='0'>--Select Department--</option>");
		for(i = 0; i < json.DeptList.length; i++){
			$("#empDepartment").append("<option value="+json.DeptList[i].DeptID+">"+json.DeptList[i].DeptName+"</option>");
		}
		var deptID = ${DetailEmployees.employee.department.deptID };
		$("#empDepartment").val(deptID);
	}
	
	function loadLiteracy(data){
		var json = JSON.parse(data);
		$("#empLiteracy").empty();
		$("#empLiteracy").append("<option value='0'>--Select Literacy--</option>");
		for(i = 0; i < json.LiteracyList.length; i++){
			$("#empLiteracy").append("<option value="+json.LiteracyList[i].LiteracyID+">"+json.LiteracyList[i].LiteracyName+"</option>");
		}
		var literacyID = ${DetailEmployees.literacy };
		$("#empLiteracy").val(literacyID);
	}
	
	$("#empBank").change(function(){
		$.ajax({
			url:"AddEmployeeController.do?action=getBrandBank&bankID="+$("#empBank option:selected").val(),
			type:"POST",
			datatype:'json',
			success: function(data){
				$("#empBrandBank").prop("disabled", false);
				var json = JSON.parse(data);
				$("#empBrandBank").empty();
				$("#empBrandBank").append("<option value='0'>--Select Brand Bank--</option>");
				for(i = 0; i < json.BrandBankList.length; i++){
					$("#empBrandBank").append("<option value="+json.BrandBankList[i].BrandBankID+">"+json.BrandBankList[i].BrandBankName+"</option>");
				}
			},
			error:function(){
				
			}
		});
	});
	
	function validateData(){
		var flag = true;
		if($("#empFirstName").val().trim() == ''){
			$("#empFirstName").css("border-color", "red");
			$("#errorFirstName").css("color", "red");
			$("#errorFirstName").css("display", "");
			flag = false;
		}else{
			$("#empFirstName").css("border-color", "");
			$("#errorFirstName").css("display", "none");
		}
		
		if($("#empLastName").val().trim() == ''){
			$("#empLastName").css("border-color", "red");
			$("#errorLastName").css("color", "red");
			$("#errorLastName").css("display", "");
			flag = false;
		}else{
			$("#empLastName").css("border-color", "");
			$("#errorLastName").css("display", "none");
		}
		
		if($("#empEmail").val().trim()== '' || !validateEmail($("#empEmail").val().trim())){
			$("#empEmail").css("border-color", "red");
			$("#errorEmail").text("Not enter or not correct format");
			$("#errorEmail").css("color", "red");
			$("#errorEmail").css("display", "");
			flag = false;
		}else{
			$("#errorEmail").text("");
			$("#empEmail").css("border-color", "");
			$("#errorEmail").css("display", "none");
		}
		
		if($("#empPhone").val().trim() =='' || !isNumeric($("#empPhone").val()) 
				|| $("#empPhone").val().trim().length > 11 
				|| $("#empPhone").val().trim().length < 10){
			$("#empPhone").css("border-color", "red");
			$("#errorPhone").text("Not enter or must 10-11 numbers");
			$("#errorPhone").css("color", "red");
			$("#errorPhone").css("display", "");
			flag = false;
		}else{
			$("#errorPhone").text("");
			$("#empPhone").css("border-color", "");
			$("#errorPhone").css("display", "none");
		}
		
		if($("#empIDCard").val().trim() == '' || !isNumeric($("#empIDCard").val()) 
				|| $("#empIDCard").val().trim().length > 9
				|| $("#empIDCard").val().trim().length < 9){
			$("#empIDCard").css("border-color", "red");
			$("#errorIDCard").text("Not enter or must 9 numbers");
			$("#errorIDCard").css("color", "red");
			$("#errorIDCard").css("display", "");
			flag = false;
		}else{
			$("#errorIDCard").text("");
			$("#empIDCard").css("border-color", "");
			$("#errorIDCard").css("display", "none");
		}
		
		if($("#empBank option:selected").val() == '0'){
			$("#empBank").css("border-color", "red");
			$("#errorBank").css("color", "red");
			$("#errorBank").css("display", "");
			flag = false;
		}else{
			$("#empBank").css("border-color", "");
			$("#errorBank").css("display", "none");
		}
		
		if($("#empBrandBank option:selected").val() == '0'){
			$("#empBrandBank").css("border-color", "red");
			$("#errorBrandBank").css("color", "red");
			$("#errorBrandBank").css("display", "");
			flag = false;
		}else{
			$("#empBrandBank").css("border-color", "");
			$("#errorBrandBank").css("display", "none");
		}
		
		if($("#empAccountBank").val().trim() == ''){
			$("#empAccountBank").css("border-color", "red");
			$("#errorAccount").text("Please enter account bank");
			$("#errorAccount").css("color", "red");
			$("#errorAccount").css("display", "");
			flag = false;
		}else{
			$("#errorAccount").text("");
			$("#empAccountBank").css("border-color", "");
			$("#errorAccount").css("display", "none");
		}
		
		if($("#empDepartment option:selected").val() == '0'){
			$("#empDepartment").css("border-color", "red");
			$("#errorDepartment").css("color", "red");
			$("#errorDepartment").css("display", "");
			flag = false;
		}else{
			$("#empDepartment").css("border-color", "");
			$("#errorDepartment").css("display", "none");
		}
		
		if($("#empOffice option:selected").val() == '0'){
			$("#empOffice").css("border-color", "red");
			$("#errorOffice").css("color", "red");
			$("#errorOffice").css("display", "");
			flag = false;
		}else{
			$("#empOffice").css("border-color", "");
			$("#errorOffice").css("display", "none");
		}
		
		return flag;
	}
	
	function validateEmail(email) {
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
  }
	
	function isNumeric(number){
	    var re = /^-{0,1}\d*\.{0,1}\d+$/;
	    return re.test(number);
	}
	
	function displayError(){
		var message = "Error at ";
		var email = ${DetailEmployees.errorEmail};
		var phone = ${DetailEmployees.errorPhone};
		var idCard = ${DetailEmployees.errorIDCard};
		var account = ${DetailEmployees.errorAccountBank};
		if(email){
			$("#errorEmail").text("");
			$("#errorEmail").text("Email is exited");
			$("#empEmail").css("border-color", "red");
			$("#errorEmail").css("display", "");
			$("#errorEmail").css("color", "red");
			$("#lbEmail").css("color", "red");
			message += "email. "
		}
		
		if(phone){
			$("#errorPhone").text("");
			$("#errorPhone").text("Phone is exited");
			$("#empPhone").css("border-color", "red");
			$("#errorPhone").css("display", "");
			$("#errorPhone").css("color", "red");
			$("#lbPhone").css("color", "red");
			message += "phone."
		}
		
		if(idCard){
			$("#errorIDCard").text("");
			$("#errorIDCard").text("ID card is exited");
			$("#empIDCard").css("border-color", "red");
			$("#errorIDCard").css("display", "");
			$("#errorIDCard").css("color", "red");
			$("#lbIDCard").css("color", "red");
			message += "indentity card. "
		}
		
		if(account){
			$("#errorAccount").text("");
			$("#errorAccount").text("Account bank is exited");
			$("#empAccount").css("border-color", "red");
			$("#errorAccount").css("display", "");
			$("#errorAccount").css("color", "red");
			$("#lbAccount").css("color", "red");
			message += "account bank."
		}
		return message;
	}
	
	$("#cancel").click(function(){
		$("#update").css("display", "none");
		$("#cancel").css("display", "none");
		$("#edit").css("display", "");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	function checkExtendImageFile(){
		var extend = $("#empImage").val().substring($("#empImage").val().length -3); //Chrome
		if(extend.toLowerCase() == 'jpg'){
			return true;
		}else if(extend.toLowerCase() == 'png'){
			return true;
		}
		return false;
	}
	$(".management").click(function(){
		window.location.replace("EmployeeController.do");
	});
	
	$("#continue").click(function(){
		$("#updateSuccess").css("display","none");
		$("#content").css("display","");
	});
	
	$("#addContract").click(function(){
		$("#contractID").val("");
		$("#contractType").val("0");
		$("#contractName").val("");
		$("#RegDate").val("");
		$("#StartDate").val("");
		$("#EndDate").val("");
		$("#Salary").val("");
		
		//Display div
		$("#divCreateDate").css("display","none");
		$("#divUserCreate").css("display","none");
		$("#divUpdateDate").css("display","none");
		$("#divUserUpdate").css("display","none");
		
		$("#btn-updateContract").css("display","none");
		$("#btn-saveContract").css("display","");
		$("#btn-addMoreContract").css("display","");
		
		$("#contractID").prop("disabled", false);
		$("#myModal").modal('show');
	});
	
	$("#addInsurance").click(function(){
		$("#insuranceID").val("");
		$("#insuranceType").val("0");
		$("#insuranceRegDate").val("");
		$("#regPlace").val("");
		$("#payForm").val("0");
		$("#money").val("");
		
		$("#divCreateDate1").css("display","none");
		$("#divUserCreate1").css("display","none");
		$("#divUpdateDate1").css("display","none");
		$("#divUserUpdate1").css("display","none");
				
		$("#btn-updateInsurance").css("display","none");
		$("#btn-saveInsurance").css("display","");
		$("#btn-addMoreInsurance").css("display","");
				
		$("#insuranceID").prop("disabled", false);
		
		$("#myModal1").modal('show');
	});
	
	$("#btn-saveContract").click(function(){
		if(validateDataContract()){
			$("#run").css("display", "");
				$.ajax({
					url:"AddEmployeeController.do?action=saveContract"
							+"&employeeID="+$("#lbEmpID").text()
							+"&contractName="+$("#contractName").val()
							+"&contractID="+$("#contractID").val()
							+"&contractType="+$("#contractType option:selected").val()
							+"&regDate="+$("#RegDate").val()
							+"&startDate="+$("#StartDate").val()
							+"&endDate="+$("#EndDate").val()
							+"&salary="+$("#Salary").val(),
					type:"POST",
					success:function(data){
						contractFlag = true;
						$("#run").css("display", "none");
						$("#lblMesage").css("display", "");
						$("#lblMesage").css("color", "green");
						$("#lblMesage").text(data);
					},
					error:function(data){
						
					}
				});
		}
	});
	
	$("#btn-saveInsurance").click(function(){
		if(validateDataInsurance()){
			$("#run1").css("display", "");
				$.ajax({
					url:"AddEmployeeController.do?action=saveInsurance"
							+"&employeeID="+$("#lbEmpID").text()
							+"&insuracneID="+$("#insuranceID").val()
							+"&insuranceType="+$("#insuranceType option:selected").val()
							+"&insuranceRegDate="+$("#insuranceRegDate").val()
							+"&insuranceRegPlace="+$("#regPlace").val()
							+"&money="+$("#money").val()
							+"&payForm="+$("#payForm option:selected").val(),
					type:"POST",
					success:function(data){
						insuranceFlag = true;
						$("#run1").css("display", "none");
						$("#lblMesage1").css("display", "");
						$("#lblMesage1").css("color", "green");
						$("#lblMesage1").text(data);
					},
					error:function(data){
						
					}
				});
		}
	});
	
	function validateDataContract(){
		var flag = true;
		
		if($("#contractType option:selected").val() == 0){
			$("#contractType").css("border-color","red");
			flag = false;
		}
		else{
			$("#contractType").css("border-color","");
		}
		
		if($("#contractID").val().trim() == ''){
			$("#contractID").css("border-color","red");
			flag = false;
		}else{
			$("#contractID").css("border-color","");
		}
		
		if($("#RegDate").val().trim() == ''){
			$("#RegDate").css("border-color","red");
			flag = false;
		}else{
			$("#RegDate").css("border-color","");
		}
		
		if($("#StartDate").val().trim() == ''){
			$("#StartDate").css("border-color","red");
			flag = false;
		}else{
			$("#StartDate").css("border-color","");
		}
		
		if($("#EndDate").val().trim() == ''){
			$("#EndDate").css("border-color","red");
			flag = false;
		}else{
			$("#EndDate").css("border-color","");
		}
		
		if($("#Salary").val().trim() == '' || !isNumeric($("#Salary").val().trim())){
			$("#Salary").css("border-color","red");
			flag = false;
		}else{
			$("#Salary").css("border-color","");
		}
		if(!flag){
			$("#lblMesage").css("display", "");
			$("#lblMesage").text("Please check data entered");
		}else{
			$("#lblMesage").css("display", "none");
			$("#lblMesage").text("");
		}
		return flag;
	}
	
	function validateDataInsurance(){
		var flag = true;
		
		if($("#insuranceType option:selected").val() == 0){
			$("#insuranceType").css("border-color","red");
			flag = false;
		}
		else{
			$("#insuranceType").css("border-color","");
		}
		
		if($("#insuranceID").val().trim() == ''){
			$("#insuranceID").css("border-color","red");
			flag = false;
		}else{
			$("#insuranceID").css("border-color","");
		}
		
		if($("#insuranceRegDate").val().trim() == ''){
			$("#insuranceRegDate").css("border-color","red");
			flag = false;
		}else{
			$("#insuranceRegDate").css("border-color","");
		}
		
		if($("#payForm option:selected").val().trim() == ''){
			$("#payForm").css("border-color","red");
			flag = false;
		}else{
			$("#payForm").css("border-color","");
		}
		
		if(!flag){
			$("#lblMesage1").css("display", "");
			$("#lblMesage1").text("Please check data entered");
		}else{
			$("#lblMesage1").css("display", "none");
			$("#lblMesage1").text("");
		}
		return flag;
	}
	
	function isNumeric(number){
	    var re = /^-{0,1}\d*\.{0,1}\d+$/;
	    return re.test(number);
	}
	
	$("#btn-addMoreInsurance").click(function(){
		$("#lblMesage1").css("display", "none");
		$("#lblMesage1").text("");
		$("#insuranceType").val("0");
		$("#insuranceID").val("");
		$("#insuranceRegDate").val("");
		$("#regPlace").val("");
		$("#money").val("");
		$("#payForm").val("0");
	});
	
	$("#btn-addMoreContract").click(function(){
		$("#lblMesage").css("display", "none");
		$("#lblMesage").text("");
		$("#contractType").val("0");
		$("#contractID").val("");
		$("#contractName").val("");
		$("#RegDate").val("");
		$("#StartDate").val("");
		$("#EndDate").val("");
		$("#Salary").val("");
	});
	
	$(".close").click(function(){
		if(contractFlag || insuranceFlag){
			bootbox.alert("You have change more information. Please! Reload page.", function(){
				window.location.replace("DetailEmployeeController.do?action=detail&employeeID="+$("#lbEmpID").text());
			});
		}
	});
	
	function detailContract(contractID){
		$.ajax({
			url:"DetailEmployeeController.do?action=detailContract&contractID="+contractID,
			type:"POST",
			success:function(data){
				var contract = JSON.parse(data);
				
				//tag p
				$("#pCreateDate").text("Create Date: "+contract.Contracts.createDate);
				$("#pUserCreate").text("Create By: "+contract.Contracts.userCreate);
				$("#pUpdateDate").text("Update Date: "+contract.Contracts.updateDate);
				$("#pUserUpdate").text("Update By: "+contract.Contracts.userUpdate);	
				
				//value input, select
				$("#contractID").val(contract.Contracts.contractID);
				$("#contractType").val(contract.Contracts.contractType);
				$("#contractName").val(contract.Contracts.contractName);
				$("#RegDate").val(contract.Contracts.regDate);
				$("#StartDate").val(contract.Contracts.startDate);
				$("#EndDate").val(contract.Contracts.endDate);
				$("#Salary").val(contract.Contracts.salary);
				
				//Display div
				$("#divCreateDate").css("display","");
				$("#divUserCreate").css("display","");
				$("#divUpdateDate").css("display","");
				$("#divUserUpdate").css("display","");
				
				$("#btn-updateContract").css("display","");
				$("#btn-saveContract").css("display","none");
				$("#btn-addMoreContract").css("display","none");
				
				$("#contractID").prop("disabled", true);
				
				$("#myModal").modal('show');
			},
			error:function(data){
				
			}
		});
	}
	
	function deleteContract(contractID){
		bootbox.confirm("Do you want to delete "+contractID+"?", function(result) {
			if(result){
				$.ajax({
					url:"DetailEmployeeController.do?action=deleteContract"
							+"&contractID="+contractID
							+"&employeeID="+$("#lbEmpID").text(),
					type:"POST",
					success:function(data){
						var res = data.split('~');
						bootbox.alert(res[0], function(){
							var str = "";
							var contracts = JSON.parse(res[1]);
							table.fnDestroy();
							$("#content1").empty();
							for(i = 0; i < contracts.Contracts.length; i++){
								str += '<tr>';
								str += '<td><a style="cursor: pointer;" onclick="detailContract("'+contracts.Contracts[i].contractID+'")">Detail</a>'
								+'&nbsp;&nbsp;<a style="cursor: pointer;" onclick="deleteContract("'+contracts.Contracts[i].contractID+'")">Delete</a></td></td>';
								str += '<td>'+contracts.Contracts[i].contractID+'</td>';
								str += '<td>'+contracts.Contracts[i].contractType+'</td>';
								str += '<td>'+contracts.Contracts[i].contractName+'</td>';
								str += '<td>'+contracts.Contracts[i].regDate+'</td>';
								str += '<td>'+contracts.Contracts[i].startDate+'</td>';
								str += '<td>'+contracts.Contracts[i].endDate+'</td>';
								str += '<td>'+contracts.Contracts[i].salary+'</td>';
								str += '</tr>';
							}
							$("#content1").append(str);
							table = $('#example').dataTable();
						});
					},
					error:function(data){
						
					}
				});
			}
		}); 
	}
	
	$("#btn-updateContract").click(function(){
		if(validateDataContract()){
			$.ajax({
				url:"DetailEmployeeController.do?action=updateContract"
						+"&contractName="+$("#contractName").val()
						+"&contractID="+$("#contractID").val()
						+"&contractType="+$("#contractType option:selected").val()
						+"&regDate="+$("#RegDate").val()
						+"&startDate="+$("#StartDate").val()
						+"&endDate="+$("#EndDate").val()
						+"&salary="+$("#Salary").val(),
				type:"POST",
				success: function(data){
					contractFlag = true;
					$("#run").css("display", "none");
					$("#lblMesage").css("display", "");
					$("#lblMesage").css("color", "green");
					$("#lblMesage").text(data);
				},
				error:function(data){
					
				}
			});
		}
	});
	
	function detailInsurance(insuranceID){
		$.ajax({
			url:"DetailEmployeeController.do?action=detailInsurance&insuranceID="+insuranceID,
			type:"POST",
			success:function(data){
				var insurance = JSON.parse(data);
				
				//tag p
				$("#pCreateDate1").text("Create Date: "+insurance.Insurances.createDate);
				$("#pUserCreate1").text("Create By: "+insurance.Insurances.userCreate);
				$("#pUpdateDate1").text("Update Date: "+insurance.Insurances.updateDate);
				$("#pUserUpdate1").text("Update By: "+insurance.Insurances.userUpdate);	
				
				//value input, select
				$("#insuranceID").val(insurance.Insurances.insuranceID);
				$("#insuranceType").val(insurance.Insurances.insuranceType);
				$("#insuranceRegDate").val(insurance.Insurances.insuranceRegDate);
				$("#regPlace").val(insurance.Insurances.insuranceRegPlace);
				$("#payForm").val(insurance.Insurances.insurancePayForm == null?0:insurance.Insurances.insurancePayForm);
				$("#money").val(insurance.Insurances.insuranceMoney == "0"?"":insurance.Insurances.insuranceMoney);
				
				//Display div
				$("#divCreateDate1").css("display","");
				$("#divUserCreate1").css("display","");
				$("#divUpdateDate1").css("display","");
				$("#divUserUpdate1").css("display","");
				
				$("#btn-updateInsurance").css("display","");
				$("#btn-saveInsurance").css("display","none");
				$("#btn-addMoreInsurance").css("display","none");
				
				$("#insuranceID").prop("disabled", true);
				
				$("#myModal1").modal('show');
			},
			error:function(data){
				
			}
		});
	}
	
	function deleteInsurance(insuranceID){
		bootbox.confirm("Do you want to delete "+insuranceID+"?", function(result) {
			if(result){
				$.ajax({
					url:"DetailEmployeeController.do?action=deleteInsurance"
							+"&insuranceID="+insuranceID
							+"&employeeID="+$("#lbEmpID").text(),
					type:"POST",
					success:function(data){
						var res = data.split('~');
						bootbox.alert(res[0], function(){
							var str = "";
							var insurances = JSON.parse(res[1]);
							table1.fnDestroy();
							$("#content2").empty();
							for(i = 0; i < insurances.Insurances.length; i++){
								str += '<tr>';
								str += '<td><a style="cursor: pointer;" onclick="detailContract("'+insurances.Insurances[i].insuraceID+'")">Detail</a>'
								+'&nbsp;&nbsp;<a style="cursor: pointer;" onclick="deleteContract("'+insurances.Insurances[i].insuraceID+'")">Delete</a></td></td>';
								str += '<td>'+insurances.Insurances[i].insuraceID+'</td>';
								str += '<td>'+insurances.Insurances[i].insuraceType+'</td>';
								str += '<td>'+insurances.Insurances[i].regDate+'</td>';
								str += '<td>'+insurances.Insurances[i].regPlace+'</td>';
								str += '<td>'+insurances.Insurances[i].payForm+'</td>';
								str += '<td>'+insurances.Insurances[i].money+'</td>';
								str += '</tr>';
							}
							$("#content2").append(str);
							table1 = $('#example1').dataTable();
						});
					},
					error:function(data){
						
					}
				});
			}
		}); 
	}
	
	$("#btn-updateInsurance").click(function(){
		if(validateDataInsurance()){
			$.ajax({
				url:"DetailEmployeeController.do?action=updateInsurance&insuranceID="+$("#insuranceID").val()
					+"&insuranceType="+$("#insuranceType option:selected").val()
					+"&insuranceRegDate="+$("#insuranceRegDate").val()
					+"&insuranceRegPlace="+$("#regPlace").val()
					+"&money="+$("#money").val()
					+"&payForm="+$("#payForm option:selected").val(),
				type:"POST",
				success: function(data){
					insuranceFlag = true;
					$("#run1").css("display", "none");
					$("#lblMesage1").css("display", "");
					$("#lblMesage1").css("color", "green");
					$("#lblMesage1").text(data);
				},
				error:function(data){
					
				}
			});
		}
	});
	
	//Edit tung truong
	$("#eTitle").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "none");
		$("#empTitle").css("display", "");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eFirstName").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "none");
		$("#empFirstName").css("display", "");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eLastName").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "none");
		$("#empLastName").css("display", "");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eBirthDate").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "none");
		$("#empBirthDate").css("display", "");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eGender").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "none");
		$("#empGender").css("display", "");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eNationality").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "none");
		$("#empNationality").css("display", "");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eMarriage").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "none");
		$("#empMarital").css("display", "");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eNativeLand").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "none");
		$("#empNativeLand").css("display", "");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eCurrenentAddress").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "none");
		$("#empCurrentAddress").css("display", "");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eEmail").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "none");
		$("#empEmail").css("display", "");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#ePhone").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "none");
		$("#empPhone").css("display", "");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eAccountBank").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "none");
		$("#empPhone").css("display", "");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eIDCard").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "none");
		$("#empIDCard").css("display", "");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eBank").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "none");
		$("#empBank").css("display", "");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eBrandBank").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "none");
		$("#empBrandBank").css("display", "");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eAccountBank").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "none");
		$("#empAccountBank").css("display", "");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eLiteracy").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "none");
		$("#empLiteracy").css("display", "");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eDepartment").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "none");
		$("#empDepartment").css("display", "");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eOffice").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "none");
		$("#empOffice").css("display", "");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "none");
	});
	
	$("#eImage").click(function(){
		$("#cancel").css("display", "");
		$("#update").css("display", "");
		$("#edit").css("display", "none");
		//title
		$("#lbTitle").css("display", "");
		$("#empTitle").css("display", "none");
		//Firstname
		$("#lbEmpFirstName").css("display", "");
		$("#empFirstName").css("display", "none");
		//Lastname
		$("#lbLastName").css("display", "");
		$("#empLastName").css("display", "none");
		//Birthdate
		$("#lbBirthDate").css("display", "");
		$("#empBirthDate").css("display", "none");
		//Gender
		$("#lbGender").css("display", "");
		$("#empGender").css("display", "none");
		if($("#lbGender").text() == 'Male')
			$("#empGender").val('true');
		else
			$("#empGender").val('false');
		//Nationality(*)
		$("#lbNationality").css("display", "");
		$("#empNationality").css("display", "none");
		//Marrage
		$("#lbMarrage").css("display", "");
		$("#empMarital").css("display", "none");
		if($("#lbMarrage").text() == 'Yes')
			$("#empMarital").val('true');
		else if($("#lbMarrage").text() == 'No')
			$("#empMarital").val('false');
		else
			$("#empMarital").val('0');
		//NaviteLand
		$("#lbNaviteLand").css("display", "");
		$("#empNativeLand").css("display", "none");
		//Address
		$("#lbAddress").css("display", "");
		$("#empCurrentAddress").css("display", "none");
		//Email
		$("#lbEmail").css("display", "");
		$("#empEmail").css("display", "none");
		//Phone
		$("#lbPhone").css("display", "");
		$("#empPhone").css("display", "none");
		//IDCard
		$("#lbIDCard").css("display", "");
		$("#empIDCard").css("display", "none");
		//Bank(*)
		$("#lbBank").css("display", "");
		$("#empBank").css("display", "none");
		//Deparment(*)
		$("#lbDepartment").css("display", "");
		$("#empDepartment").css("display", "none");
		//BranBank(*)
		$("#lbBrankBank").css("display", "");
		$("#empBrandBank").css("display", "none");
		//Account
		$("#lbAccount").css("display", "");
		$("#empAccountBank").css("display", "none");
		//Office(*)
		$("#lbOffice").css("display", "");
		$("#empOffice").css("display", "none");
		//Literacy(*)
		$("#lbLiteracy").css("display", "");
		$("#empLiteracy").css("display", "none");
		//Image
		$("#empImage").css("display", "");
	});
	
	$("#signout").click(function(){
		$.ajax({
			url:"LoginController?action=false",
			type:"POST",
			success:function(){
				window.location.replace("LoginController");
			}
		});
	});
</script>
</html>
    